<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var solve = function (board) {
      board.forEach((item, i) => item.forEach((ele, j) =>
        (i === 0 || i === board.length - 1 || j === 0 || j === item.length - 1) && ele === 'O' && change(i, j)
      ));//遍历边界 搜索关联元素
      function change(y, x) {
        if (y < 0 || y == board.length || x < 0 || x > board[0].length || board[y][x] !== 'O') return
        board[y][x] = null //
        change(y + 1, x);
        change(y - 1, x);
        change(y, x + 1);
        change(y, x - 1)
      }
      board.forEach((item, i) => item.forEach((ele, j) => !ele ? board[i][j] = 'O' : ele === 'O' && (board[i][j] = 'X')))
      return board
    };
    console.log(solve([["X"]]))
  </script>
</body>

</html>